<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>个人中心</title>

		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
		 crossorigin="anonymous">
		<!-- 导入样式 -->
		<link rel="stylesheet" href="css/common.css" />

		<script src="http://unpkg.com/vue/dist/vue.js"></script>
		<script src="https://cdn.jsdelivr.net/vue.resource/1.0.3/vue-resource.min.js"></script>
		<link href="../css/personal.css" rel="stylesheet" type="text/css" />

	</head>
	<body>
		<article id="">

			<div class="whole">
				<div id="menu">
					<div class="ch">
						<iframe align="center" width="100%" height="75px" src="../html/User/UserNavigation.html" frameborder="no" scrolling="no"
						 border="0"></iframe>
					</div>
				</div>
				<div id="main">
					<h4 align="center">个人中心</h4>
					<div id="number">账号信息</div>
					<div id="head">
						<!-- 头像 -->
						<div id="head-frame">
							<img src="../img/109951164026200738.jpg" />
						</div>
						<div id="name">
							<p>{{u.userName}}</p>
							<a class="btn " @click="bj('昵称upName',$event)" data-toggle="modal" data-target="#exampleModalCenter">编辑昵称</a>

						</div>
					</div>
					<div id="user">
						<div class="row">
							<div class="col-sm-3">保密邮箱：</div>
							<div class="col-sm-3">{{u.userEmail}}</div>
							<div class="col-sm-6"><a class="btn " @click="bj('邮箱upEmail',$event)" data-toggle="modal" data-target="#exampleModalCenter">修改邮箱</a></div>
						</div>

						<div class="row">
							<div class="col-sm-3">密码：</div>
							<div class="col-sm-3">*******</div>
							<div class="col-sm-6"><a class="btn " @click="bj('密码upPassword',$event)" data-toggle="modal" data-target="#exampleModalCenter">修改密码</a></div>
						</div>

						<div class="row">
							<div class="col-sm-3">手机号：</div>
							<div class="col-sm-3">已绑定</div>
							<div class="col-sm-6"><a class="btn " @click="ts('手机号',$event)" data-toggle="modal" data-target="#exampleModalCenter">修改手机号</a></div>

						</div>

						<div class="row">
							<div class="col-sm-3">QQ账号：</div>
							<div class="col-sm-3">已绑定</div>
							<div class="col-sm-6"><a class="btn " @click="ts('QQ账号',$event)" data-toggle="modal" data-target="#exampleModalCenter">修改QQ号</a></div>
						</div>

						<div class="row">
							<div class="col-sm-3">微信：</div>
							<div class="col-sm-3">已绑定</div>
							<div class="col-sm-6"><a class="btn " @click="ts('微信',$event)" data-toggle="modal" data-target="#exampleModalCenter">修改微信</a></div>
						</div>

						<div class="row">
							<div class="col-sm-3">余额：</div>
							<div class="col-sm-3">{{u.userBalance}}</div>
						</div>
					</div>

					<!-- Modal -->
					<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle"
					 aria-hidden="true">
						<div class="modal-dialog modal-dialog-centered" role="document">
							<div class="modal-content">
								<div class="modal-header">
									<h5 class="modal-title" id="exampleModalLongTitle"></h5>
									<button type="button" @click="close()" class="close" data-dismiss="modal" aria-label="Close">
										<span aria-hidden="true" id="x">&times;</span>
									</button>
								</div>
								<div class="modal-body">
									<input @focus="clearTip"  ref="input" @keyup="check()" type="text" v-model="inPutVal" placeholder="请输入" class="NC form-control" />
									<div class="collapse" id="tip" style="margin-top: 1em;">
											<div class="alert alert-success" role="alert">
												{{tip}}
											</div>
									</div>
									</div>
									<div class="modal-footer">
										<button type="button" @click="clearTip" class="btn btn-secondary" data-dismiss="modal" id="gb">关闭</button>
										<button type="button" @click="ncSubmit()" class="btn" id="NC">提交</button>
									</div>
								</div>
								
							</div>
						</div>
					</div>

				</div>
		</article>

		<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
		 crossorigin="anonymous"></script>
		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
		 crossorigin="anonymous"></script>
		<script>
			$(function() {
				$(".tip").hide();
				$(".NC").hide();
				var url = "queryUser"
				var v = new Vue({
					el: '#main',
					data: {
						u: [],
						inPutVal: '',
						url: '',
						tip:'修改成功'

					},
					created: function() {
						//获取本地存储的邮箱
					var Email=localStorage.getItem("userEmail");
					console.log(Email)
						var args = {
							'userEmail': Email,
						}
						$.post("/server/admin/queryUser", args, function(result) {
							v.u = result.data;
						});
					},

					methods: {
						//编辑并获取后台接口名称
						bj: function(m, event) {
							//显示提交按钮
							$("#NC").show();
							//显示输入框
							$(".NC").show();
							this.inPutVal = '';
							//删除提示
							$(".ts").remove();
							$("#exampleModalLongTitle").text(m.substr(0, 2));
							url = m.substr(2, m.length - 2);
							this.url = url;
							//改为文本密码框
							this.$refs.input.type = "text";
							if (url == "upName") {
								
							} else if (url == "upPassword") {
								//改为密码框
								this.$refs.input.type = "password";
							}
							//添加的输入框
							// $(".modal-body").append("<input placeholder='请输入' class='NC' onkeyup='value=value.replace(/[^\u4E00-\u9FA5]/g,'')'>");
						},
						// onkeyup='value=value.replace(/[^\u4E00-\u9FA5]/g,'')' onbefroepaste='clipboardData.setData('text',clipboardData.getData('text').replace(/[^\u4E00-\u9FA5]/g,''))' 



						ts: function(m, event) {
							$("#exampleModalLongTitle").text(m.substr(0, m.length));
							var m = m + "未开发！"
							$(".modal-body").append("<p class='ts' >" + m + "</p>");
							//隐藏提交按钮
							$("#NC").hide();
						},
						ncSubmit() {
							
							var args = {
								'userEmail': this.u.userEmail,
								'date': this.inPutVal
							}
							var reg=/^\w+((.\w+)|(-\w+))@[A-Za-z0-9]+((.|-)[A-Za-z0-9]+).[A-Za-z0-9]+$/;
							
							//
							if(url=='upEmail'){
								if (!reg.test(this.inPutVal)) {
									this.tip='邮箱格式不正确';
									$("#tip").collapse('show');
									return false;
								}
								args = {
									'userId': this.u.userId,
									'date': this.inPutVal
								}
							}
							this.tip='修改成功';
							$.post("/server/admin/" + url, args, function(result) {
								v.u = result;
								$("#tip").collapse('show')
								setTimeout(function() {
									$("#tip").collapse('hide');
									//关闭弹窗
									$('.modal').modal('hide');
								}, 1000);

							});

							//内容制空·
							// $(".NC").val("");
							$("#tip").collapse('hide');
							$(".NC").hide();
							$(".ts").remove();
						},
						close() {
							$("#tip").collapse('hide');
							$(".NC").hide();
							$(".ts").remove();
						},
						check() {
							if (url == "upName") {
								this.inPutVal = this.inPutVal.replace(/[^\u4E00-\u9FA5]/g, '');
							} else if (url == "upPassword") {
								this.inPutVal = this.inPutVal.replace(/[\W]/g, '');
							} else if (url = "upEmail"){
								
							}
						},
						clearTip(){
							$("#tip").collapse('hide');
							
						}

					}
				})

				// 获取地址内的参数
				function getQueryString(Email) {
					var reg = new RegExp("(^|&)" + Email + "=([^&]*)(&|$)", "i");
					var r = window.location.search.substr(1).match(reg);
					if (r != null) return decodeURI(r[2]);
					return null;
				}

				// //获取弹窗内容以及发送请求
				// $('#NC').click(function() {
				// 	var nc = $(".NC").val();
				// 	console.log(nc);
				// 	var args = {
				// 		'userId': 1,
				// 		'date': nc,
				// 	}
				// 	$.post("/ComeOnProject02/admin/"+url, args, function(result) {
				// 		v.u = result;
				// 	});
				// 	//点击提交按钮是可以自动关闭弹窗
				// 	$('.modal').modal('hide');
				// 	//内容制空·
				// 	// $(".NC").val("");
				// 	$(".NC").remove();
				// 	$(".ts").remove();
				// })
				$("#x").click(function() {
					$(".NC").hide();
					$(".ts").remove();
				});
				$("#gb").click(function() {
					$(".NC").hide();
					$(".ts").remove();
				});
			});
		</script>
	</body>
</html>
